<!DOCTYPE html>
<html>
<head>
	<title>Emmet语法</title>
</head>
<body>
<!-- div>ul>li -->
<div>
	<ul>
		<li></li>
	</ul>
</div>

<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>

<!-- div+div>p>span+em  -->
<div></div>
<div>
	<p><span></span><em></em></p>
</div>

<!-- div+div>p>span+em^bq -->
<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

<!-- div+div>p>span+em^^^bq -->
<div></div>
<div>
	<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

<!-- ul>li*5 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
	</footer>
</div>

<!-- (div>dl>(dt+dd)*3)+footer>p -->
<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

<!-- div#header+div.page+div#footer.class1.class2.class3 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

<!-- td[title colspan] -->
<td title="" colspan=""></td>
<!-- td[title="Hello world!" colspan=3] -->
<td title="Hello world!" colspan="3"></td>
<!-- td[title=hello colspan=3] -->
<td title="hello" colspan="3"></td>

<!-- ul>li.item$*5 -->
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>
<!-- ul>li.item$$$*5 -->
<ul>
	<li class="item001"></li>
	<li class="item002"></li>
	<li class="item003"></li>
	<li class="item004"></li>
	<li class="item005"></li>
</ul>
<!-- ul>li.item$@-*5 -->
<ul>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>
<!-- ul>li.item$@3*5 -->
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>
<!-- ul>li.item$@-3*5 -->
<ul>
	<li class="item7"></li>
	<li class="item6"></li>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
</ul>

<!-- a{Click me} -->
<a href="">Click me</a>
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>
<!-- p{Click }+a{here}+{ to continue} -->
<p>Click </p>
<a href="">here</a> to continue
<!-- (header > ul.nav > li*5) + footer -->
(header > ul.nav > li*5) + <footer></footer>
<!-- (header>ul.nav>li*5)+footer -->
<header>
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</header>
<footer></footer>
</body>
</html>

